<template>
  <div>
    <header class="header-top">
      <span class="title">后台管理</span>
      <span class="exit-text" @click="exitButton">退出</span>
    </header>
    <main class="main-all">
      <!-- 左边栏 -->
      <left-aside />
      <!-- right-main -->
      <right-container />
    </main>
  </div>
</template>

<script lang = 'ts'>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import LeftAside from '../../components/management/LeftAside.vue'
import RightContainer from '../../components/management/RightContainer.vue'
export default defineComponent ({
  name: 'index',
  components: {
    'left-aside': LeftAside,
    'right-container': RightContainer,
  },
  setup: () => {
    const router = useRouter()

    let exitButton = () => {
      router.push({
        path: '/'
      })
    }
 
    return { exitButton }
  },
})
</script>

<style lang = "less">
.header-top {
  height: 80px;
  background-color: #f99;
  background: url('../../assets/images/1.jpeg') no-repeat;
  background-size: 100%;
  display: grid;
  grid-template-columns: 70% 4%;
  
  .title {
    margin: 20px auto;
    font-size: 20px;
  }

  .exit-text {
    margin-top: 20px;
    font-size: 20px;
    color: gray;

    &:hover {
      cursor: pointer;
    }
  }
}

</style>
